<template>
  <el-scrollbar>
    <div class="options" :style="getStyle">
      <draggable
        v-model="getOptions"
        animation="300"
        group="option"
        forceFallback="true"
        handle=".btn"
      >
        <div class="list" v-for="(item, index) in modelOptions" :key="index">
          <el-button circle class="btn" icon="el-icon-s-operation"></el-button>
          <el-select
            v-model="item.label"
            filterable
            allow-create
            default-first-option
            style="width: 100%; margin-right: 10px"
            @change="(e) => changeOptions(e, item)"
          >
            <el-option
              v-for="item in selectOptions"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-input v-if="!selectValues" v-model="item.value"></el-input>
          <el-select
            v-model="item.value"
            filterable
            allow-create
            default-first-option
            :placeholder="`${type}值`"
            style="width: 100%; margin-right: 10px"
            @change="(e) => changeValue(e, item)"
            v-else
          >
            <el-option
              v-for="item in selectValues"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <!-- <slot name="style" :scope="item"></slot> -->
          <!-- <el-popover
            width="400"
            trigger="click"
            v-if="frontmatter"
            placement="left"
          >
            <slot name="content" :scope="item"></slot>
            <el-button
              slot="reference"
              style="flex: 1"
              @click="getPopoverIndex(index)"
              >属性</el-button
            >
          </el-popover> -->
          <!-- <template v-else>
            <template v-if="type === '筛选'">
              <el-input
                :placeholder="`${type}名`"
                v-model="item.text"
              ></el-input>
              <el-input
                :placeholder="`${type}值`"
                v-model="item.value"
              ></el-input>
            </template>
            <template v-else-if="type === '选项'">
              <el-input
                :placeholder="`${type}名`"
                v-model="item.value"
              ></el-input>
              <el-input
                :placeholder="`${type}值`"
                v-model="item.label"
              ></el-input>
            </template>
            <template v-else>
              <el-select
                v-model="item.label"
                filterable
                :placeholder="`${type}名`"
                allow-create
                default-first-option
                style="width: 100%; margin-right: 10px"
                @change="(e) => changeOptions(e, item)"
              >
                <el-option
                  v-for="item in selectOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-input
                v-if="!selectValues"
                :placeholder="`${type}值`"
                v-model="item.value"
              ></el-input>
              <el-select
                v-model="item.value"
                filterable
                allow-create
                default-first-option
                :placeholder="`${type}值`"
                style="width: 100%; margin-right: 10px"
                @change="(e) => changeValue(e, item)"
                v-else
              >
                <el-option
                  v-for="item in selectValues"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </template> -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="remove(index)"
          ></el-button>
        </div>
        <el-row justify="center" type="flex">
          <el-button circle icon="el-icon-plus" @click="add"></el-button>
        </el-row>
      </draggable>
    </div>
  </el-scrollbar>
</template>
<script>
import draggable from "vuedraggable";
import { options } from "./options/cssOptions";
export default {
  name: "selectOptionsComponent",
  model: {
    prop: "modelOptions",
    event: "change",
  },
  components: {
    draggable,
  },
  props: {
    modelOptions: Array,
    options: Array,
    type: {
      default: "样式",
      type: String,
    },
    frontmatter: Boolean,
  },
  data() {
    return {
      selectOptions: Object.keys(options),
      selectValues: [],
    };
  },
  computed: {
    getOptions: {
      get() {
        return this.options;
      },
      set(val) {
        this.$emit("update:options", val);
      },
    },
    getStyle() {
      if (this.type === "筛选") {
        return {
          maxHeight: "200px",
        };
      } else {
        return {
          maxHeight: "80vh",
          paddingBottom: "20rem",
        };
      }
    },
  },
  methods: {
    add() {
      this.modelOptions.push({
        label: "",
        value: "",
      });
    },
    remove(index) {
      this.modelOptions.splice(index, 1);
    },
    changeOptions(e, item) {
      item.label = e;
      this.selectValues = options[e];
    },
    changeValue(e, item) {
      item.value = e;
    },
    // remove(index) {
    //   this.$emit("remove", index);
    // },
    // add() {
    //   this.$emit("add");
    // },
    // getPopoverIndex(index) {
    //   this.$emit("update:popoverIndex", index);
    // },
  },
};
</script>
<style lang="scss" scoped>
.options {
  // max-height: 200px;
  .list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    span {
      flex: 1;
      padding: 0 10rem;
      button {
        width: 100%;
      }
    }
    .el-input,
    .el-button {
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>